<template>
  <div class="contain">
    <div class="contentbox">
      <div class="content">
        <div class="center"></div>
        <ul class="picker star-scrollbar">
          <li></li>
          <li></li>
          <li class="hover" v-for="(item,index) in time1.hour" :key="index" @click="chooseH(item)" :class="{HActive: item.isSelect}">{{item.value}}</li>
          <li></li>
          <li></li>
        </ul>
        <ul class="picker star-scrollbar">
          <li></li>
          <li></li>
          <li class="hover" v-for="(item,index) in time1.min" :key="index"  @click="chooseM(item)" :class="{MActive: item.isSelect}">{{item.value}}</li>
          <li></li>
          <li></li>
        </ul>
        <ul class="picker star-scrollbar">
          <li></li>
          <li></li>
          <li class="hover" v-for="(item,index) in time1.sec" :key="index" @click="chooseS(item)" :class="{SActive: item.isSelect}">{{item.value}}</li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div class="content">
        <div class="center"></div>
        <ul class="picker star-scrollbar">
          <li></li>
          <li></li>
          <li class="hover" v-for="(item,index) in time2.hour" :key="index" @click="chooseH1(item)" :class="{HActive1: item.isSelect}">{{item.value}}</li>
          <li></li>
          <li></li>
        </ul>
        <ul class="picker star-scrollbar">
          <li></li>
          <li></li>
          <li class="hover" v-for="(item,index) in time2.min" :key="index"  @click="chooseM1(item)" :class="{MActive1: item.isSelect}">{{item.value}}</li>
          <li></li>
          <li></li>
        </ul>
        <ul class="picker star-scrollbar">
          <li></li>
          <li></li>
          <li class="hover" v-for="(item,index) in time2.sec" :key="index" @click="chooseS1(item)" :class="{SActive1: item.isSelect}">{{item.value}}</li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
    <div>
      <button  class="btn" @click="confirm">确定</button>
    </div>
  </div>
</template>

<script>
let h = []
for(let i = 0; i<= 23; i++) {
  if(i < 10) {
    h.push({
      value: '0' + i,
      isSelect: false
    })
  } else {
    h.push({
      value: '' + i,
      isSelect: false
    })
  }
}
let m = []
for(let i = 0; i<= 59; i++) {
  if(i < 10) {
    m.push({
      value: '0' + i,
      isSelect: false
    })
  } else {
    m.push({
      value: '' + i,
      isSelect: false
    })
  }
}
let s = []
for(let i = 0; i<= 59; i++) {
  if(i < 10) {
    s.push({
      value: '0' + i,
      isSelect: false
    })
  } else {
    s.push({
      value: '' + i,
      isSelect: false
    })
  }
}
let h1 = []
for(let i = 0; i<= 23; i++) {
  if(i < 10) {
    h1.push({
      value: '0' + i,
      isSelect: false
    })
  } else {
    h1.push({
      value: '' + i,
      isSelect: false
    })
  }
}
let m1 = []
for(let i = 0; i<= 59; i++) {
  if(i < 10) {
    m1.push({
      value: '0' + i,
      isSelect: false
    })
  } else {
    m1.push({
      value: '' + i,
      isSelect: false
    })
  }
}
let s1 = []
for(let i = 0; i<= 59; i++) {
  if(i < 10) {
    s1.push({
      value: '0' + i,
      isSelect: false
    })
  } else {
    s1.push({
      value: '' + i,
      isSelect: false
    })
  }
}
export default {
  props: {
    range: {
      type: Array,
      default: ['10:00:00', '18:00:00']
    }
  },
  data() {
    return {
      time1: {
        hour: h,
        min: m,
        sec: s,
        h: '',
        m: '',
        s: ''
      },
      time2: {
        hour: h1,
        min: m1,
        sec: s1,
        h: '',
        m: '',
        s: ''
      }
    }
  },
  created() {
    if(this.range.length === 2) {
      var t1 = this.range[0].split(':')
      var t2 = this.range[1].split(':')
    } else {
      var t1 = ['10','00','00']
      var t2 = ['18','00','00']
    }
    this.time1.h = t1[0]
    this.time1.m = t1[1]
    this.time1.s = t1[2]
    this.time1.hour.forEach(ele => {
      if(ele.value == this.time1.h) {
        ele.isSelect = true
      } else {
        ele.isSelect = false
      }
    })
   
    this.time1.min.forEach(ele => {
      if(ele.value == this.time1.m) {
        ele.isSelect = true
      } else {
        ele.isSelect = false
      }
    })
    this.time1.sec.forEach(ele => {
      if(ele.value == this.time1.s) {
        ele.isSelect = true
      } else {
        ele.isSelect = false
      }
    })
     this.$nextTick(function() {
      let num = parseInt(this.$el.querySelector('.HActive').textContent)
      this.$el.querySelectorAll('.picker')[0].scrollTop = 30 * num
    }) 
    this.$nextTick(function() {
      let num = parseInt(this.$el.querySelector('.MActive').textContent)
      this.$el.querySelectorAll('.picker')[1].scrollTop = 30 * num
    })
    this.$nextTick(function() {
      let num = parseInt(this.$el.querySelector('.SActive').textContent)
      this.$el.querySelectorAll('.picker')[2].scrollTop = 30 * num
    })
    //----------------------------
    this.time2.h = t2[0]
    this.time2.m = t2[1]
    this.time2.s = t2[2]
    this.time2.hour.forEach(ele => {
      if(ele.value == this.time2.h) {
        ele.isSelect = true
      } else {
        ele.isSelect = false
      }
    })
   
    this.time2.min.forEach(ele => {
      if(ele.value == this.time2.m) {
        ele.isSelect = true
      } else {
        ele.isSelect = false
      }
    })
    this.time2.sec.forEach(ele => {
      if(ele.value == this.time2.s) {
        ele.isSelect = true
      } else {
        ele.isSelect = false
      }
    })
     this.$nextTick(function() {
      let num = parseInt(this.$el.querySelector('.HActive1').textContent)
      this.$el.querySelectorAll('.picker')[3].scrollTop = 30 * num
    }) 
    this.$nextTick(function() {
      let num = parseInt(this.$el.querySelector('.MActive1').textContent)
      this.$el.querySelectorAll('.picker')[4].scrollTop = 30 * num
    })
    this.$nextTick(function() {
      let num = parseInt(this.$el.querySelector('.SActive1').textContent)
      this.$el.querySelectorAll('.picker')[5].scrollTop = 30 * num
    })
  },
  mounted() {
    let h = this.$el.querySelectorAll('.picker')[0]
    h.addEventListener('scroll', () => {
        let current = parseInt(this.$el.querySelectorAll('.picker')[0].scrollTop / 30)
        this.time1.hour.forEach(ele => {
          ele.isSelect = false
        })
        this.time1.hour[current].isSelect = true
        this.time1.h = current<10?'0'+current: ''+ current
        this.send()
      clearTimeout(scrollTimer);
      let scrollTimer = setTimeout(() => {
        let current = parseInt(this.$el.querySelectorAll('.picker')[0].scrollTop / 30)
        this.$el.querySelectorAll('.picker')[0].scrollTop = 30 * current
      }, 300);
    })
    // ---------------------
    let m = this.$el.querySelectorAll('.picker')[1]
    m.addEventListener('scroll', () => {
      let current = parseInt(this.$el.querySelectorAll('.picker')[1].scrollTop / 30)
      this.time1.min.forEach(ele => {
          ele.isSelect = false
        })
        this.time1.min[current].isSelect = true
        this.time1.m = current<10?'0'+current: ''+ current
        this.send()
      clearTimeout(scrollTimer);
      let scrollTimer = setTimeout(() => {
        let current = parseInt(this.$el.querySelectorAll('.picker')[1].scrollTop / 30)
        this.$el.querySelectorAll('.picker')[1].scrollTop = 30 * current
      }, 300);
    })
    //--------------------
    let s = this.$el.querySelectorAll('.picker')[2]
    s.addEventListener('scroll', () => {
      let current = parseInt(this.$el.querySelectorAll('.picker')[2].scrollTop / 30)
        this.time1.sec.forEach(ele => {
          ele.isSelect = false
        })
        this.time1.sec[current].isSelect = true
        this.time1.s = current<10?'0'+current: ''+ current
        this.send()
      clearTimeout(scrollTimer);
      let scrollTimer = setTimeout(() => {
        let current = parseInt(this.$el.querySelectorAll('.picker')[2].scrollTop / 30)
        this.$el.querySelectorAll('.picker')[2].scrollTop = 30 * current
      }, 300);
    })
    //-------------------------
    let h1 = this.$el.querySelectorAll('.picker')[3]
    h1.addEventListener('scroll', () => {
        let current = parseInt(this.$el.querySelectorAll('.picker')[3].scrollTop / 30)
        this.time2.hour.forEach(ele => {
          ele.isSelect = false
        })
        this.time2.hour[current].isSelect = true
        this.time2.h = current<10?'0'+current: ''+ current
        this.send()
      clearTimeout(scrollTimer);
      let scrollTimer = setTimeout(() => {
        let current = parseInt(this.$el.querySelectorAll('.picker')[3].scrollTop / 30)
        this.$el.querySelectorAll('.picker')[3].scrollTop = 30 * current
      }, 300);
    })
    //------------------
    let m1 = this.$el.querySelectorAll('.picker')[4]
    m1.addEventListener('scroll', () => {
      let current = parseInt(this.$el.querySelectorAll('.picker')[4].scrollTop / 30)
      this.time2.min.forEach(ele => {
          ele.isSelect = false
        })
        this.time2.min[current].isSelect = true
        this.time2.m = current<10?'0'+current: ''+ current
        this.send()
      clearTimeout(scrollTimer);
      let scrollTimer = setTimeout(() => {
        let current = parseInt(this.$el.querySelectorAll('.picker')[4].scrollTop / 30)
        this.$el.querySelectorAll('.picker')[4].scrollTop = 30 * current
      }, 300);
    })
    //----------------------
    let s1 = this.$el.querySelectorAll('.picker')[5]
    s1.addEventListener('scroll', () => {
      let current = parseInt(this.$el.querySelectorAll('.picker')[5].scrollTop / 30)
        this.time2.sec.forEach(ele => {
          ele.isSelect = false
        })
        this.time2.sec[current].isSelect = true
        this.time2.s = current<10?'0'+current: ''+ current
        this.send()
      clearTimeout(scrollTimer);
      let scrollTimer = setTimeout(() => {
        let current = parseInt(this.$el.querySelectorAll('.picker')[5].scrollTop / 30)
        this.$el.querySelectorAll('.picker')[5].scrollTop = 30 * current
      }, 300);
    })
  },
  methods: {
    chooseH(row) {
      this.time1.hour.forEach(ele => {
        ele.isSelect = false
      });
      this.time1.h = row.value
      row.isSelect = true
      this.time1.m = '00'
      this.time1.s = '00'
      this.time1.min.forEach(ele => {
        ele.isSelect = false
      });
      this.time1.min[0].isSelect = true
      this.$nextTick(function() {
        let num = parseInt(this.$el.querySelector('.MActive').textContent)
        this.$el.querySelectorAll('.picker')[1].scrollTop = 30 * num
      })
      this.time1.sec.forEach(ele => {
        ele.isSelect = false
      });
      this.time1.sec[0].isSelect = true
      this.$nextTick(function() {
        let num = parseInt(this.$el.querySelector('.SActive').textContent)
        this.$el.querySelectorAll('.picker')[2].scrollTop = 30 * num
      })
      this.$nextTick(function() {
        let num = parseInt(this.$el.querySelector('.HActive').textContent)
        this.$el.querySelectorAll('.picker')[0].scrollTop = 30 * num
      })
      this.send()
    },
    chooseM(row) {
      this.time1.min.forEach(ele => {
        ele.isSelect = false
      });
      row.isSelect = true
      this.time1.m = row.value
      this.$nextTick(function() {
        let num = parseInt(this.$el.querySelector('.MActive').textContent)
        this.$el.querySelectorAll('.picker')[1].scrollTop = 30 * num
      })
      this.send()
    },
    chooseS(row) {
      this.time1.sec.forEach(ele => {
        ele.isSelect = false
      });
      row.isSelect = true
      this.time1.s = row.value
      this.$nextTick(function() {
        let num = parseInt(this.$el.querySelector('.SActive').textContent)
        this.$el.querySelectorAll('.picker')[2].scrollTop = 30 * num
      })
      this.send()
    },
    chooseH1(row) {
      this.time2.hour.forEach(ele => {
        ele.isSelect = false
      });
      row.isSelect = true
      this.time2.h = row.value
      this.time2.m = '00'
      this.time2.s = '00'
      this.time2.min.forEach(ele => {
        ele.isSelect = false
      });
      this.time2.min[0].isSelect = true
      this.$nextTick(function() {
        let num = parseInt(this.$el.querySelector('.MActive1').textContent)
        this.$el.querySelectorAll('.picker')[4].scrollTop = 30 * num
      })
      this.time2.sec.forEach(ele => {
        ele.isSelect = false
      });
      this.time2.sec[0].isSelect = true
      this.$nextTick(function() {
        let num = parseInt(this.$el.querySelector('.SActive1').textContent)
        this.$el.querySelectorAll('.picker')[5].scrollTop = 30 * num
      })
      this.$nextTick(function() {
        let num = parseInt(this.$el.querySelector('.HActive1').textContent)
        this.$el.querySelectorAll('.picker')[3].scrollTop = 30 * num
      })
      this.send()
    },
    chooseM1(row) {
      this.time2.min.forEach(ele => {
        ele.isSelect = false
      });
      row.isSelect = true
      this.time2.m = row.value
      this.$nextTick(function() {
        let num = parseInt(this.$el.querySelector('.MActive1').textContent)
        this.$el.querySelectorAll('.picker')[4].scrollTop = 30 * num
      })
      this.send()
    },
    chooseS1(row) {
      this.time2.sec.forEach(ele => {
        ele.isSelect = false
      });
      row.isSelect = true
      this.time2.s = row.value
      this.$nextTick(function() {
        let num = parseInt(this.$el.querySelector('.SActive1').textContent)
        this.$el.querySelectorAll('.picker')[5].scrollTop = 30 * num
      })
      this.send()
    },
    send() {
      let start
      let end
      if(parseInt(this.time1.h+this.time1.m+this.time1.s) > parseInt(this.time2.h+this.time2.m+this.time2.s)) {
        end = this.time1.h + ':' + this.time1.m + ':' + this.time1.s
        start = this.time2.h + ':' + this.time2.m + ':' + this.time2.s
      } else {
        start = this.time1.h + ':' + this.time1.m + ':' + this.time1.s
        end = this.time2.h + ':' + this.time2.m + ':' + this.time2.s
      }
      this.$emit('timechange', [start, end])
    },
    confirm() {
      this.$emit('confirm')
    }
  }
}
</script>

<style lang="less" scoped>
  .contain {
    width: 360px;
  }
  .contentbox {
    width: 100%;
    display: flex;
  }
  .content {
    flex: 1;
    display: flex;
    position: relative;
    padding: 5px;
    .center {
      position: absolute;
      top: 50%;
      left: 5px;
      transform: translateY(-50%);
      background-color: #cccccc50;
      width: 100%;
      height: 30px;
      border-top: 1px solid #EBEEF5;
      border-bottom: 1px solid #EBEEF5;
      z-index: -1;
    }
    .picker {
      width: 33%;
      height: 150px;
      overflow: auto;
      li {
        padding: 5px;
        min-height: 20px;
      }
      .hover {
        cursor: pointer;
        &:hover {
          background-color: #2FC0BE10;
        }
      }
    }
  }
  .HActive,.MActive,.SActive,.HActive1,.MActive1,.SActive1{
    // background-color: #ccc!important;
  }
</style>